<template>
  <p-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <p-spin :spinning="confirmLoading">
      <p-form :form="form">
        <p-row>
		  <p-col  :span="24">
			<p-form-item label="标签模板编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<!-- <f-popup
						contextPath="mes-code"
						v-decorator="['labelTemplateNo', validatorRules.labelTemplateNo]"
						:trigger-change="true"
						org-fields="id,label_template_no,label_template_name,label_template_descrtion,label_template_length,label_type,dptname,label_color,ribbons_type,printer_type,contain_sn"
						dest-fields="label_template_id,label_template_no,label_template_name,label_template_descrtion,label_template_length,label_type,dptname,label_color,ribbons_type,printer_type,contain_sn"
						code="mes_get_barcode_template"
						@callback="popupCallback"/> -->


					<p-select
						show-search
						placeholder="Select a person"
						option-filter-prop="children"
						style="width: 200px"
						:filter-option="filterOption"
						v-decorator="['labelTemplateNo', validatorRules.labelTemplateNo]"						
						@focus="handleFocus"
						@blur="handleBlur"
						@change="handleChange"
					>
						<p-select-option :value="item.labelTemplateName" v-for="(item, index) in mesBcTemplateList" :key="index">
							{{item.labelTemplateName}}
						</p-select-option>
					</p-select>

			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="标签模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input readOnly v-decorator="[ 'labelTemplateName', validatorRules.labelTemplateName]" placeholder="请输入标签模板名称"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="标签模板描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input readOnly v-decorator="[ 'labelTemplateDescrtion', validatorRules.labelTemplateDescrtion]" placeholder="请输入标签模板描述"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="标签模板尺寸" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input readOnly v-decorator="[ 'labelTemplateLength', validatorRules.labelTemplateLength]" placeholder="请输入标签模板尺寸"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="标签类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-dict-select-tag disabled type="list" v-decorator="['labelType', validatorRules.labelType]" :trigger-change="true" dictCode="mes_label_type" placeholder="请选择标签类型"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="责任部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-select-depart v-decorator="['dptname', validatorRules.dptname]" :trigger-change="true"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="标签纸颜色" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-dict-select-tag disabled type="list" v-decorator="['labelColor', validatorRules.labelColor]" :trigger-change="true" dictCode="mes_label_color" placeholder="请选择标签纸颜色"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="碳带型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input readOnly v-decorator="[ 'ribbonsType', validatorRules.ribbonsType]" placeholder="请输入碳带型号"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="打印机型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-dict-select-tag disabled type="list" v-decorator="['printerType', validatorRules.printerType]" :trigger-change="true" dictCode="mes_printer_type" placeholder="请选择打印机型号"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="是否包含流水号" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-dict-select-tag disabled type="list" v-decorator="['containSn', validatorRules.containSn]" :trigger-change="true" dictCode="ba_yn" placeholder="请选择是否包含流水号"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="打印份数" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input-number   v-decorator="[ 'prtintQty', validatorRules.prtintQty]" placeholder="请输入打印份数" style="width: 100%"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input  v-decorator="[ 'remark', validatorRules.remark]" placeholder="请输入备注"></p-input>
			</p-form-item>
		  </p-col>
        </p-row>


      </p-form>
    </p-spin>
  </p-modal>
</template>

<script>

	import { httpAction } from '@/api/manage'
  import { postAction,getAction,deleteAction } from '@/api/manage'
	
  import { SubmitOnchangMixin } from '@/mixins/SubmitOnchangMixin'
  import pick from 'lodash.pick'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"

  export default {
    name: "MesBcProductListModal",
	mixins: [SubmitOnchangMixin],
    components: {
      JSelectDepart,
      JDictSelectTag,
    },
    props:{
      mainId:{
        type:String,
        required:false,
        default:''
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules:{
					labelTemplateNo: {},
					labelTemplateName: {},
					labelTemplateDescrtion: {},
					labelTemplateLength: {},
					labelType: {},
					dptname: {},
					labelColor: {},
					ribbonsType: {},
					printerType: {},
					containSn: {},
					prtintQty: {rules: [{ required: true, message: '请输入打印份数!' }]},
					remark: {},
				},
				mesBcTemplateList: [],
        url: {
          add: '/mes-code/auto/mesBcProductLabel/addMesBcProductList',
					edit: '/mes-code/auto/mesBcProductLabel/editMesBcProductList',
					mesBcTemplateList: '/mes-code/mesBcTemplate/all', // 标签信息列表
        }

      }
    },
    created () {
			this.getMesBcTemplateList()
    },
    methods: {

			getMesBcTemplateList() {
				console.log(888);
				
				const parmas = {
					pageSize: 1000,
				}
				getAction(this.url.mesBcTemplateList, parmas).then( res => {
					if ( res.success) {
						this.mesBcTemplateList = res.data
					}
				} )
				
			},


			handleChange(value) {
				console.log(`selected ${value}`);
			},
			handleBlur() {
				console.log('blur');
			},
			handleFocus() {
				console.log('focus');
			},
			filterOption(input, option) {
				return (
					option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
				);
			},



      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'timestamp','companyId','factoryId','clientId','substituteId','flag','labelTemplateNo','labelTemplateName','labelTemplateDescrtion','labelTemplateLength','labelType','dptname','labelColor','ribbonsType','printerType','containSn','prtintQty','mesProductLabelId','labelTemplateId','remark','createBy','createTime','updateBy','updateTime'))
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
		handleOk () {
			const that = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
			  if (!err) {
				  that.confirmLoading = true;
				  let httpurl = '';
				  let method = '';
				  let formData = Object.assign(this.model, values);
				  this.formData = Object.assign(this.model, values);
                  formData['mesProductLabelId'] = this.mainId
                  this.formData['mesProductLabelId'] = this.mainId
				  //新增触发
				  if(!this.model.id){
					httpurl+=this.url.add;
					method = 'post';
					if(this.EnhanceJS.afterAdd){
					  //新增之前
					  let Obj = eval(this.EnhanceJS.afterAdd)
					  new Obj(this)
					}else{
					  console.log("表单提交数据",formData)
					  that.modalFrom(httpurl,formData,method)
					}
				  }else{
					//编辑触发
					httpurl+=this.url.edit;
					method = 'put';
					if(this.EnhanceJS.afterEdit){
					 //编辑之前
					  let Obj = eval(this.EnhanceJS.afterEdit)
					  new Obj(this)
					}else{
					  console.log("表单提交数据",formData)
					  that.modalFrom(httpurl,formData,method)
					}
				  }
			  }

			})
		},
      handleCancel () {
        this.close()
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'timestamp','companyId','factoryId','clientId','substituteId','flag','labelTemplateNo','labelTemplateName','labelTemplateDescrtion','labelTemplateLength','labelType','dptname','labelColor','ribbonsType','printerType','containSn','prtintQty','mesProductLabelId','labelTemplateId','remark','createBy','createTime','updateBy','updateTime'))
      },


    }
  }
</script>
